import {Component} from 'react'
class List extends Component {
    constructor(){
        console.log("constructor");
        super();
        this.state={
            msg:"hello world",
            list:[{id:1,title:'北京'},{id:2,title:'上海'}]
        }

       this.interval=  setInterval(() => {

            console.log(new Date());
            
        }, 1000);
    }
    static getDerivedStateFromProps(props,state){

        console.log("getDerivedStateFromProps");

        return props;
    }
    update(){
        this.setState({msg:"您好世界"});
    }
    componentDidMount(){

        console.log("componentDidMount页面挂载完成");
        
    }
    componentDidUpdate(){
        console.log("componentDidUpdate","更新完成");
    }
    componentWillUnmount(){

        clearInterval( this.interval);
        console.log("销毁","componentWillUnmount");
    }
    render(){

       

        console.log("render");
        return(

            <div>
                {this.state.msg}
                <div>-------列表渲染-----</div>
                <ul>

                    {
                        this.state.list.map((item,index)=>(
                            <li key={item.id}>{index}、{item.title}</li>
                        ))
                    }
                    {/* <li>北京</li>
                    <li>上海</li> */}
                </ul>

                <button onClick={()=>this.update()}>更新</button>
            </div>
        )
    }

}
export default List;